<template>
    <div class="layout">
        <div class="container">
            <div style="width: 20%;">
                <input type="text" class="getUsername" v-model="username" placeholder="请输入用户名">
                <br>
                <input type="text" class="getRoomId" placeholder="请输入房间号" v-model="roomIdInput"
                    @keyup.enter="joinRoom(roomIdInput)"><br>
                <button class="getRoomIdBtn" @click="joinRoom(roomIdInput)">加入房间</button>
            </div>
            <el-main v-if="showChatWindow">
                <chatLayout :roomId="roomId" :username="username" />
            </el-main>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import chatLayout from './chatWindow/chatLayout.vue'
import { useSocketStore } from '@/stores/socketStore'

const username = ref('bolin');
const roomId = ref('');
const roomIdInput = ref('12345');
const showChatWindow = ref<boolean>(false);
const inRoom = ref<boolean>(false);
const socketService = ref<any>();



onMounted(async () => {
    socketService.value = await useSocketStore();

    socketService.value.socket.on('connectionSuccess', (id:string) => {
        socketService.value.uniqueId = id
        // console.log(socketService.value.uniqueId)
    });
})

const joinRoom = (roomIdInput: string) => {
    // 验证用户名是否输入
    if (username.value.trim() === '') {
        alert('请输入用户名');
        return;
    }

    // 验证房间号是否输入
    if (roomIdInput.trim() === '') {
        alert('请输入房间号');
        return;
    }
    socketService.value.username = username.value
    // 将输入框中的值赋给 roomId
    socketService.value.roomId = roomIdInput;
    socketService.value.socket.emit('joinRoom', socketService.value.roomId)

    showChatWindow.value = true;
}
</script>

<style>
.container{
    display: flex;
    height: 100%;
}
.layout {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: rgb(39, 42, 55);
}

.getUsername {
    width: 70%;
    font-size: 14px;
}

.getRoomId {
    width: 70%;
    font-size: 14px;
}

.getRoomIdBtn {
    font-size: 14px;
}

input {
    color: white;
    margin: 3%;
    background-color: rgb(66, 70, 86);
    border-radius: 15px;
    padding: 2px;
    border: 1px solid rgb(80, 85, 103);
}

.getRoomIdBtn {
    margin: 3%;
    color: black;
    background-color: rgb(66, 70, 86);
    border-radius: 15px;
    border: 2px solid rgb(34, 135, 225);
    padding: 10px;
    height: 40px;
}
</style>./chatLayout.vue
